* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #1acbfc;
}
.traffic-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 22.5em;
  width: 10em;
  background-color: #333;
  border: 0.51em solid #eee;
  border-radius: 2em;
  z-index: 10;
}
.traffic-light::before {
  content: '';
  width: 3em;
  height: 8em;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #eee;
  background: linear-gradient(rgba(240,240,240,0.9), #1acbfc);
  z-index: 10;
}
.light {
  width: 6em;
  height: 5.5em;
  border-radius: 50%;
  background: #000;
  border: 1px solid #000;
  margin: 1em auto;
}
.red {
  animation: light-red 10s linear infinite;
}
.amber {
  animation: light-amber 10s linear infinite;
}
.green {
  animation: light-green 10s linear infinite;
}
@-moz-keyframes light-red {
  0% {
    background-color: #000;
  }
  1%, 21% {
    background-color: #f00;
  }
  22%, 100% {
    background-color: #000;
  }
}
@-webkit-keyframes light-red {
  0% {
    background-color: #000;
  }
  1%, 21% {
    background-color: #f00;
  }
  22%, 100% {
    background-color: #000;
  }
}
@-o-keyframes light-red {
  0% {
    background-color: #000;
  }
  1%, 21% {
    background-color: #f00;
  }
  22%, 100% {
    background-color: #000;
  }
}
@keyframes light-red {
  0% {
    background-color: #000;
  }
  1%, 21% {
    background-color: #f00;
  }
  22%, 100% {
    background-color: #000;
  }
}
@-moz-keyframes light-amber {
  0%, 20% {
    background-color: #000;
  }
  22%, 41% {
    background-color: #ff7e00;
  }
  42%, 100% {
    background-color: #000;
  }
}
@-webkit-keyframes light-amber {
  0%, 20% {
    background-color: #000;
  }
  22%, 41% {
    background-color: #ff7e00;
  }
  42%, 100% {
    background-color: #000;
  }
}
@-o-keyframes light-amber {
  0%, 20% {
    background-color: #000;
  }
  22%, 41% {
    background-color: #ff7e00;
  }
  42%, 100% {
    background-color: #000;
  }
}
@keyframes light-amber {
  0%, 20% {
    background-color: #000;
  }
  22%, 41% {
    background-color: #ff7e00;
  }
  42%, 100% {
    background-color: #000;
  }
}
@-moz-keyframes light-green {
  0%, 40% {
    background-color: #000;
  }
  43%, 98% {
    background-color: #008000;
  }
  99%, 100% {
    background-color: #000;
  }
}
@-webkit-keyframes light-green {
  0%, 40% {
    background-color: #000;
  }
  43%, 98% {
    background-color: #008000;
  }
  99%, 100% {
    background-color: #000;
  }
}
@-o-keyframes light-green {
  0%, 40% {
    background-color: #000;
  }
  43%, 98% {
    background-color: #008000;
  }
  99%, 100% {
    background-color: #000;
  }
}
@keyframes light-green {
  0%, 40% {
    background-color: #000;
  }
  43%, 98% {
    background-color: #008000;
  }
  99%, 100% {
    background-color: #000;
  }
}
